<html>
<head>
  <style>
    @import url(tapev.css);
    
    #tapes {  flow:"1 3"
                   "2 4";
              border-spacing:10dip; height:*; }
              
    div.tapev > div.item
    {
      border:1px solid #aaa;
      flow: "1 1"
            "2 3"; 
      border-spacing:6dip;
    }
    div.tapev > div.item > .content { width:*; }
    div.tapev > div.item > img { max-width:64dip; }
              
  </style>  
  <script type="text/tiscript">
    include "items-source.tis";
    include "tapev.tis";
    
    event buffer-change $(div#tape) (evt)
    {
      var data = evt.data;
      $(pre#status).text = String.printf("Buffer: first record %d, last record %d", data[0], data[1]);
    }
        
  </script>  
</head>
<body>
  <h1>Virtual list sample</h1>
  <p>This sample demonstrates so called virtual list. Virtual list is using items source that contains potentially unknown list of items. 
     As number of items is unknown then we cannot show standard scrollbar in general. 
     This list is using fixed buffer of DOM elements (TapeV.BUFFER_SIZE = 20) so rendering speed is independent of number of items in the item-source list.</p>
  <p>Use mouse wheel to scroll the list.</p>
  <div #tapes>
    <caption>Normal scroll</caption>
    <div #tape .tapev items-source="LoremIpsum" >
      <div .item .template>
        <caption merge-code="caption" />
        <img merge-code="image" />
        <div .content merge-code="content" />
      </div>
    </div>
    <caption>List with kinetic scroll</caption>
    <div #kinetic-tape .tapev items-source="LoremIpsum" kinetic >
      <div .item .template>
        <caption merge-code="caption" />
        <img merge-code="image" />
        <div .content merge-code="content" />
      </div>
    </div>  
  </div>
  <pre #status>.</pre>
</body>
</html>